<!--
事件：tagChange，tag-group 组件内部操作导致 tag 发生变化时发送该事件
-->

<template>
    <div class="page-tag" v-show="true">
        <div class="tag-left" @click="moveLeft()">
            <i class='el-icon-arrow-left tag-icon'></i>
        </div>
        <div class="tag-middle">
            <div ref="tagmiddle" id="move-div">
                <div v-for="(tag, i) in tags" class="tag-box">
                    <!-- <span style="height:32px; display:inline-block;">{{tag}}</span> -->
                    <cc-tag @click="clickTag(tag)" v-if="tag == '主页'" :color="getTagColor(tag)">主页</cc-tag>
                    <cc-tag v-else :color="getTagColor(tag)" @click="clickTag(tag)">
                        {{tag}}
                        <i class='el-icon-close' @click="closeTag(tag)"></i>
                    </cc-tag>
                </div>
            <!-- <span style="width:5px;">&nbsp;</span> -->
            </div>
        </div>
        <div class="tag-right tag-close" @mouseover="overCloseTag()" @mouseout="outCloseTag()">
            <i class='el-icon-close tag-icon'></i>

            <div class="tag-close-menu" v-show="showCloseTagMenu" style="display: none; z-index:100;">
                <div class="item" @click="closeTagAll()">关闭所有</div>
                <div class="item" @click="closeTagOther()">关闭其它</div>
            </div>
            <div class="tag-close-area" v-show="showCloseTagMenu">
                <!-- 增加鼠标悬停区域 -->
            </div>
        </div>
        <div class="tag-right" @click="moveRight()">
            <i class='el-icon-arrow-right tag-icon'></i>
        </div>
    </div>
</template>

<script>
module.exports = {
    data: function() {
        return {
            showCloseTagMenu: false,
            pos: 0,
            lastPos: 0,
            posSize: 150,
            tags: []
        }
    },
    created: function() {
        this.tags = this.data;
    },
    props: {
        data: Array, // 仅初始化时该参数有效
        value: String
    },
    methods: {
        isExist: function(tag) {
            for(var i in this.tags) {
                if(this.tags[i] == tag) {
                    return true;
                }
            }
            return false;
        },
        pushTag: function(tag) {
            this.tags.push(tag);
            this.tags = Util.clone(this.tags);
        },
        activeTag: function(tag) {
            console.log('activeTag', tag, this.value);
            if(this.value != tag) {
                this.$emit('input', tag);
                if( !this.isExist(tag) ) {
                    this.pushTag(tag);
                }
                this.$nextTick(function(){
                    this.moveToTag(tag);
                });
            }
        },
        getTagColor: function (item) {
            if(item == this.value) {
                return '#62c0f9';
            } else {
                return '#ddd'; 
            }
        },
        overCloseTag: function() {
            this.showCloseTagMenu = true;
        },
        outCloseTag: function() {
            this.showCloseTagMenu = false;
        },
        closeTag: function(tag) {
            // console.log('close tag');
            var tags = [];
            for(var i in this.tags) {
                if(this.tags[i] != tag) {
                    tags.push(this.tags[i]);
                }
            }
            // console.log('tags', tags);
            var active = tags[tags.length - 1];
            // console.log('activeTag', active);
            this.$emit('input', active);
            this.$emit('tag-change', active);
            this.tags = tags;
        },
        clickTag: function(tag) {
            console.log('click tag');
            this.$emit('input', tag);
            this.$emit('tag-change', tag);
        },
        closeTagOther: function() {
            if(this.value == '主页') {
                this.tags = ['主页'];    
            } else {
                this.tags = ['主页', this.value];
            }
            this.move();
        },
        closeTagAll: function() {
            var active = '主页';
            this.tags = ['主页'];
            this.$emit('input', '主页');
            this.$emit('tag-change', '主页');
        },
        // 滚动相关
        getMoveDivWidth: function() {
            return $("#move-div").width();
        },
        getViewWidth: function() {
            return $(".tag-middle").width();
        },
        move: function() {
            this.$nextTick(() => {
                this._move();
            });
        },
        _move: function() {
            var leaveWidth = this.getViewWidth() - this.getMoveDivWidth();
            // console.log('this.getViewWidth()', this.getViewWidth());
            // console.log('this.getMoveDivWidth()', this.getMoveDivWidth());
            // console.log('leaveWidth', leaveWidth);
            // 实际标签小于滚动条，强制不可滚动
            if(leaveWidth > 0) {
                this.pos = 0;
                $("#move-div").animate({left:this.pos+'px'}, "slow");
                return;
            }
            // 实际标签大于滚动条
            var moveWidth = leaveWidth;
            console.log('this.pos', this.pos);
            if(this.pos < moveWidth) {
                this.pos = moveWidth;
            }
            if(this.pos > 0) {
                this.pos = 0;
            }
            if(this.pos == this.lastPos) {
                return;
            }
            $("#move-div").animate({left:this.pos+'px'}, "slow");
            this.lastPos = this.pos;
        },
        moveRight: function () {
            console.log('moveRight')
            // $("#move-div").animate({left:'100px'}, "slow");
            this.pos -= this.posSize;
            this.move();
        },
        moveLeft: function () {
            this.pos += this.posSize;
            this.move();
        },
        moveToTag: function (tag) {
            // 移动到当前标签
            // 判断当前item是否可见
            // 计算item之前的 tagBox 长度
            var boxes = $('.tag-box');
            var totalWidth = 0;
            var itemWidth;
            for(var i in this.tags) {
                var box = boxes[i];
                if(this.tags[i] == tag) {
                    itemWidth = $(box).width();
                    break;
                } else {
                    totalWidth += $(box).width();
                }
            }
            // console.log('滚动对象长度', this.getMoveDivWidth());
            // console.log('可视区域长度', this.getViewWidth());
            // console.log('左侧总长度', totalWidth);
            // console.log('当前位置', this.pos);
            // console.log('所选组件长度', itemWidth);
            var movePos = totalWidth + itemWidth - this.getViewWidth();
            this.pos = - movePos;
            this.move();
        },
    }
}
</script>

<style>
    .page-tag {
    position: relative;
    height: 39px;
    /* margin-top: 10px; */
    border-bottom: 1px #e8e8e8 solid;
    background-color: #e8e8e8;
    /* background-color: #61fa43; */
  }
  .page-tag .tag-close-menu {
    position: absolute;
    right: 5px;
    border-radius: 5%;
    box-shadow:0px 0px 6px #ccc;
    background-color: #fff;
    top: 40px;
    padding: 5px;
  }
  .page-tag .tag-close-area {
    z-index: 10;
    position: absolute;
    width:55px;
    height: 40px;
    right:0px;
    top:0px;
    opacity: 0;
    background-color: #4778c7;
  }
  .page-tag .tag-close-menu .item {
    font-size: 0.8rem;
    width:80px;
    padding: 5px;
  }
  .page-tag .tag-close-menu .item:hover {
    background-color: #eee;
    cursor: pointer;
  }
  .page-tag .tag-right {
    position: absolute;
    right: 30px;
    top: 0px;
    text-align: center;
    width: 30px;
    background:#fff; 
    height:39px;
    border: 1px solid #eee;
  }
  .page-tag .tag-close {
    /*必须放在 tag-right 下面*/
    position: absolute;
    right: 0;
  }
  #move-div {
    position: absolute;
    /* left: 100px; */
  }
  .page-tag .tag-middle {
    _background-color: #eee;
    background-color: #eef1f6;
    position: absolute;
    white-space: nowrap;
    left:35px;
    top:4px;
    /* margin-top:4px; */
    /* margin-left:4px; */
    height: 32px;
    width: calc(100% - 95px);
    overflow-x:hidden;
    overflow-y:hidden;
  }
  .page-tag #move-div {
    height: 32px;
    /* overflow-y: hidden; */
  }
  .page-tag .tag-box {
    display: inline-block;
    height: 32px;
    cursor: pointer;
    /* overflow: hidden; */
    /* height: px; */
  }
  .page-tag .tag-left {
    text-align: center;
    width: 30px;
    float:left; background:#fff; 
    height:39px;
    border: 1px solid #eee;
  }
  .page-tag .ivu-tag {
    margin:0px;
  }
</style>